<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动条样式</title>
    <style>
        body{
            background-color: #ccc;
        }
        /* 然后，开始写css样式
        外部的DIV设置高度比内部的要小
        这样子才能出现滚动条 */
        .test {
            width : 350px;
            height : 200px;
            /* 超过高度右边出现滚动条 */
            overflow-y: auto;
            border : none;
            margin: 100px auto;
            background-color: #f1f1f1;
        }
        .scrollbar {
            width : 300px;
            height: 300px;
            
        }
        /*配置滚动条样式*/
        /*滚动条整体样式*/
        .test::-webkit-scrollbar {
            /*高宽分别对应横竖滚动条的尺寸*/
            width : 10px; 
            height: 1px;
        }
         /*滚动条里面滚动滑块*/
        .test::-webkit-scrollbar-thumb {
            /* 设置阴影 */
            box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
            /* 设置圆角 */
            border-radius: 10px;
            /* 设置背景色 */
            background : #b4e70d;
        }
        /*滚动条里面轨道*/
        .test::-webkit-scrollbar-track {
            /* 设置阴影 */
            box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
            /* 设置圆角 */
            border-radius: 10px;
            /* 设置背景色 */
            background : #ededed;
        }
    </style>
</head>
<body>
    <!-- 首先，我们先写两个DIV -->
    <div class="test">
        <div class="scrollbar">
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
            我是内容<br/>
        </div>
     </div>
</body>
</html>